@import "../../styles/css-constants.scss";

$height: 42px;

.the_bottom_tabs {
  height: $height;
  position: fixed;

  bottom: 0;
  left: 0;
  right: 0;
  max-width: $page-max-width;
  margin: auto;

  display: flex;
  background-color: var(--bg-l);
  padding: 4px;

  cursor: pointer;
  border-top: 1px solid var(--bg);
  @media (min-width: ($page-max-width + 200px)) {
    flex-direction: column;
    top: 2rem;
    width: 4rem;
    height: 15rem;
    right: auto;
    left: 2rem;
    bottom: auto;
    box-shadow: 2px 2px 15px 0 #00000024;
  }

  &-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:not(.active) {
      filter: grayscale(1);
      opacity: 0.6;
    }

    &.active {
      @media (min-width: ($page-max-width + 200px)) {
        background-color: var(--bg);
      }
    }

    &-icon {
      width: 20px;
      height: 20px;
      margin-bottom: 4px;
    }
    &-text {
      font-size: 12px;
      color: var(--primary);
    }
  }

  &-spacer {
    height: $height;
  }
}
